<script setup lang="ts">
import { convertToBoolean } from "../../../utils/utils";
const env = import.meta.env;
const title = env.VITE_APP_TITLE;
const mockEnabledString = env.VITE_MOCK_ENABLED;
const mockEnabledBool = Boolean(env.VITE_MOCK_ENABLED);
const mockEnabledTypeof = typeof env.VITE_MOCK_ENABLED;
const url = env.VITE_API_URL;

// 通过utils函数转换
const convertToBooleanFun = convertToBoolean(
  <string>(<unknown>env.VITE_MOCK_ENABLED)
);
const convertToBooleanFunTypeof = typeof convertToBooleanFun;

// 以下方式都不行
const badBoolConvert = Boolean("false");
const truthBoolConvert: Boolean = <Boolean>env.VITE_MOCK_ENABLED;
const truthBoolConvertTypeof = typeof truthBoolConvert;

//下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。
var myBoolean = new Boolean();
var myBoolean = new Boolean(0);
var myBoolean = new Boolean(null);
var myBoolean = new Boolean("");
var myBoolean = new Boolean(false); //不带单引号的是false
var myBoolean = new Boolean(NaN);
//下面的所有的代码行均会创初始值为 true 的 Boolean 对象：
var myBoolean = new Boolean(1);
var myBoolean = new Boolean(true);
var myBoolean = new Boolean("true");
var myBoolean = new Boolean("false"); //带单引号的字符串false最终等于true
var myBoolean = new Boolean("Bill Gates");
</script>

<template>
  <h1>环境变量读取 dev、scss，boolean 值类型转换</h1>
  <p>
    VITE_APP_TITLE：
    <span class="test-color">{{ title }}</span> <br />
    VITE_API_URL：<span class="test-color">{{ url }}</span
    ><br />
    VITE_MOCK_ENABLED（typeof）：<span class="test-color">{{
      mockEnabledTypeof
    }}</span
    ><br />
    VITE_MOCK_ENABLED（string）：<span class="test-color">{{
      mockEnabledString
    }}</span
    ><br />
    VITE_MOCK_ENABLED（boolean）：<span class="test-color">{{
      mockEnabledBool
    }}</span
    ><br />

    推荐的类型转换方法 utils.convertToBoolean()：<span class="test-color">{{
      convertToBooleanFun
    }}</span
    ><br />
    推荐的类型转换方法（typeof）：<span class="test-color">{{
      convertToBooleanFunTypeof
    }}</span
    ><br />

    错误的类型转换方法 Boolean("false")：<span class="test-color">{{
      badBoolConvert
    }}</span
    ><br />
    失败的强制类型转换方法 &lt;boolean&gt;env.VITE_MOCK_ENABLED：<span
      class="test-color"
      >{{ truthBoolConvert }}</span
    ><br />
    失败的强制类型转换方法（typeof）：<span class="test-color">{{
      truthBoolConvertTypeof
    }}</span
    ><br />
  </p>
  <p>
    在 package.json 启动变量中确定使用哪个 .env.development\.env.production 文件
    <br />
    环境变量的修改，重新启动后生效 <br />
    scss 样式通过 vite.config.ts 全局导入
  </p>
</template>

<style lang="scss" scoped>
.test-color {
  color: $demo-color-primary;
}
</style>
